<template>
  <tiny-dialog-box
      v-model:visible="props.show"
      :append-to-body="true"
      :width="boxWidth"
      draggable
      top="10px"
      destroy-on-close
      :modal="false"
      :close-on-click-modal="false"
      :show-header="showHeader"
      :fullscreen="fullscreen"
      :show-close="false"
  >
    <template #title>
      <div style="display: flex;width: 100%;">
        <div style="flex: 1;" class="title">{{title}}</div>
        <div style="width: 100px;text-align: right;font-size: 12px;color: #4FC1E9;">
          <JButton type="info" icon="iconClose" circle @click="close" text="关闭" />
        </div>
      </div>
    </template>
    <div :style="{height: boxHeight}" class="content">
      <template v-if="formRules.length > 0">
        <x-form v-model:api="fApi" v-model="formModel" :rules="formRules" />
      </template>
    </div>
    <div style="height: 60px;line-height: 60px;text-align: center;" v-if="btns.length > 0">
      <div class="btn" v-for="(btn, index) in btns" :key="'btn'+index">
        <JButton :type="btn.type" :size="btn.size?btn.size:'medium'" @click="btn.click(fApi, close)">{{btn.name}}</JButton>
      </div>
    </div>
  </tiny-dialog-box>
</template>

<script setup>
import {ref, computed, onMounted, onBeforeUnmount} from "vue";
import {TinyDialogBox} from "@opentiny/vue";
import XForm from "@/lui/XForm.vue";
import {useGlobal} from "@/store/globalStore";
import JButton from '@/lui/JButton.vue'
import tool from "@/utils/tool";
const props = defineProps({
  whichPage: {type: String, default: ''},
  escToClose: {type: Boolean, default: true}, // 按esc关闭弹窗
  showHeader: {type: Boolean, default: true},
  fullscreen: {type: Boolean, default: false},
  show: {type: Boolean, default: false},
  width: {type: [String, Number], default: 800},
  height: {type: [String, Number], default: ''},
  title: {type: String, default: 'title'},
  saveUrl: {type: String, default: ''},
  rules: {type: Array, default: () => {return []}},
  btns: {type: Array, default: () => {return []}},
  model: {type: Object, default: () => {return {}}}, //传入的值
  close: {type: Function, default: () => {return {}}},
  mounted: {type: Function, default: () => {return {}}},

})
const fApi = ref({})
const formModel = ref(tool.xe.clone(props.model, true))
if(props.saveUrl) {
  formModel.value.saveUrl = props.saveUrl
}
const delUrl = ref('')
const boxWidth = computed(() => {
  if(typeof props.width === 'string') {
    return props.width
  }
  return props.width + 'px'
})
const boxHeight = computed(() => {
  if(typeof props.height === 'string') {
    if(props.height.indexOf('%') !== -1) {
      let hr = tool.xe.toNumber(props.height.replace('%',''))
      if(hr > 0) {
        let h = window.innerHeight * (hr/100)
        return h +'px'
      }
    }
    return props.height
  }
  return props.height + 'px'
})
const formRules = ref(props.rules)
const close = () => {
  if(typeof props.close === 'function') {
    props.close()
  }
  const global = useGlobal()
  global.editorOpened = false
}
const getParams = () => {
  if (formRules.value.length > 0) {

  }
  else {
    tool.post('page/getEditRule', { whichPage: props.whichPage }, true).then((ret) => {
      if (ret.data.saveUrl) {
        formModel.value.saveUrl = ret.data.saveUrl;
      }

      let rules = new Function('_tool', 'return ' + ret.data.rule)(tool);
      formRules.value = rules
    })
  }
}
const handleKeyDown = (event) => {
  if(event.key === 'Escape') {
    if(props.escToClose)
      close()
  }
}

onMounted(() => {
  props.mounted(fApi.value)
  getParams()
  document.addEventListener('keydown', handleKeyDown)
})
onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeyDown)
})



</script>


<style scoped lang="scss">
.title {
  font-size: 16px;
  color: rgba(0,0,0,0.7);
}
.btn {
  display: inline-block;
}
</style>